[iOS][Swift4.0] After Effectsのアニメーションを手軽に入れられるlottie-ios

今回は個人的に、今アプリに一番入れてみたいライブラリLottieを試してみました。

LottieはAdobe After Effectsで作成されたアニメーションをjsonに変換して読み込ませることで、手軽にアニメーションをアプリに入れることが出来ます。 また、以下の利点があります。

• 標準のアニメーションよりも凝ったものが作れる
• AndroidやWeb用のライブラリも存在するので、共通したアニメーションを使える
• アニメーションの素材サイトが公開されている（後述）

ライセンスは、Apache License 2.0です。

https://github.com/airbnb/lottie-ios

検証環境

今回は下記環境で試しています。

Xcode	9.2
Swift	4.0.3
CocoaPods	1.3.1

準備

アニメーションを入手する

Adobe After Effectsのアニメーションを作れなくても、Lottieでは素材サイトが用意されています。

https://www.lottiefiles.com/

ここのサイトにあるアニメーションは個別の記載がない限り、Creative Commons（CC）Attribution (BY) で利用することができる様です。

一覧から好きなアニメーションを選択すると、

エディタが開きます。ここでは背景色を変えて雰囲気？を見ることができます。アヌビスかわいいですね(ㆁωㆁ*)

緑にするとこんな感じ。

右上の Customize with Bodymovin Editor をクリックすると、エディタが開かれてオブジェクト自体の色を編集できます。

編集画面で、左側の色の一覧をクリックすると色を設定できるインスペクタが表示されます。

パーツ毎の色を変更できます。耳としっぽを変えるとこんな感じ。色の下にある＋ボタンは今の色をパレット登録することが出来るので、変更する前に色を保存しておくと、元の色に戻したい時に便利かもしれません。

右下のダウンロードボタンを押すと、編集された状態のファイルをダウンロードすることができます。 適宜ファイル名を変更し、これをプロジェクトに入れておきましょう。

Resources以下のanubis.jsonがアニメーションのファイルです。

インストール

今回はCocoaPodsで追加しました。

platform :ios, '11.0'
use_frameworks!

target 'ここにターゲット名' do
    pod 'lottie-ios'
end

Carthageにも対応しています。お好きな方をお使いください。

Bridging-Headerの設定

ライブラリを使うために、Bridging-Headerファイルを作成し、

#import <Lottie/Lottie.h>

と記載しましょう。

作成したファイルはBuild Settingsに忘れずに追加しておきましょう。

実装

まずは、簡単なループアニメーションの表示です。

import Lottieをして、LOTAnimationViewを生成します。

生成したLOTAnimationViewに対し、先程ダウンロードしたanubis.jsonを .setAnimation(named: "anubis")で登録します。

ループアニメーションなので、.loopAnimation = trueを設定し、アニメーションスピード.animationSpeed = 1を設定します。

画面に表示した後、.play()とするとアニメーションが動きます。

import UIKit
import Lottie

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
		
        let animationView = LOTAnimationView(frame: CGRect(x: 0, y: 100, width: 300, height: 300))
        animationView.setAnimation(named: "anubis")
        animationView.loopAnimation = true
        animationView.animationSpeed = 2
        view.addSubview(animationView)
        animationView.play()
    }

上のコードを実行すると、アニメーションが表示されます。

アニメーションスピードを.animationSpeed = 2とすると動きが早くなります。

アニメーションを止めるには.stop()を呼びます。

Storyboardに配置する

上記の例ではコードから追加しましたが、Storyboardに配置することもできます。

Viewを配置した後、Custom Class にLOTAnimationViewを設定すればOKです。

Outletで接続し、アニメーションさせたい時にplay()とすればアニメーションが動きます。

下記は、ボタンを押した時に星のアニメーションが1回動くサンプルです。

import UIKit
import Lottie

class ViewController: UIViewController {

    @IBOutlet weak var animationView: LOTAnimationView!

    override func viewDidLoad() {
        super.viewDidLoad()

        animationView.setAnimation(named: "star")
    }

    @IBAction func didTapStartButton(_ sender: Any) {
        animationView.play()
    }

また、play()はCompletionBlockを受け取れるように作られており、

animationView.play { (finished) in
    print("animation finished")
}

のように記載すれば、アニメーションの終了を受け取ることができます。

さいごに

今回は簡単な使い方しか記載しませんでしたが、v2.5.0 から 実行時にアニメーションプロパティを動的に変更するAPIが追加されていたりします。

こちらのチュートリアルを見ると、AfterEffectで作成したlayerそれぞれのTransform：Position、Rotation、Scale、Opacityが変更できるようです。

http://airbnb.io/lottie/ios/dynamic_properties.html

ここまでの物を入れるのは大変そうですが、ボタンを押した時のアニメーションやチュートリアル的な決められたアニメーションは手軽に入れられるので、ぜひ活用したいですね✨

Document

http://airbnb.io/lottie/ios.html#swift-examples